<template>
	<div class="group-invite-me">
		<div class="title-name title-border clear">
			<div class="title-name-l fl">
				<router-link to="/group/manage/iJoin">我创建的圈组</router-link>
				<router-link to="/group/manage/inviteMe">邀请我的圈组</router-link>
			</div>
			<div class="title-name-r fr">
				<router-link to="/group/groupAdd">创建圈组</router-link>
			</div>
		</div>
		<div class="teacher-train" v-loading="loading">
			<ul>
				<li class="teacher-train-list clear" v-for="item of groupListData" :key="item.id">
					<a href="#" class="train-list-cover fl">
						<img :src="BASE_URL+item.picture" :onerror="errorImg" />
					</a>
					<!-- <router-link :to="{path: '/group/manageOne', query: {id: item.id}}" class="train-list-cover fl">
                        <img :src="BASE_URL+item.picture" :onerror="errorImg">
          </router-link>-->
					<div class="train-list-content">
						<div class="train-list-title clear">
							<a href="#">{{item.name}}</a>
							<!-- <router-link :to="{path: '/group/manageOne', query: {id: item.id}}">{{item.name}}</router-link> -->
							<div class="train-list-operation fr">
								<el-popover placement="bottom" width="120" popper-class="ioperation_hover" trigger="hover">
									<ul class="r_ioperation">
										<li @click="agreeInvite(item.id)">同意</li>
										<li @click="rejectInvite(item.id)">拒绝</li>
									</ul>
									<i slot="reference" class="el-icon-arrow-down"></i>
								</el-popover>
							</div>
						</div>
						<div class="train-list-label">
							<span>{{item.grade_name}}</span>
							<span>{{item.subject_name}}</span>
						</div>
						<div class="train-list-info">
							<span>
								创建人:
								<i>{{item.create_name}}</i>
							</span>
							<span>
								创建时间:
								<i>{{item.create_time}}</i>
							</span>
						</div>
						<div class="i_grouplTxt_xm clear">
							<span>
								<i class="ipng quanzu_icon06"></i>
								<i>成员 : {{item.u_count}}</i>
							</span>
							<span>
								<i class="ipng quanzu_icon07"></i>
								<i>公告 : {{item.news_count}}</i>
							</span>
							<span>
								<i class="ipng quanzu_icon08"></i>
								<i>教案 : {{item.res_count}}</i>
							</span>
						</div>
					</div>
				</li>
			</ul>
			<el-pagination background v-if="total_number > page_size" class="pageing" @current-change="currentChange"
			 :current-page="page_index" :page-size="page_size" layout="total, prev, pager, next, jumper" :total="total_number"></el-pagination>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipng image_state01"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page_index: 1,
				page_size: this.$g.page_size,
				total_number: 0,
				placeholder: false,
				groupListData: [],
				loading: true,
				errorImg: 'this.src="' +
					require("../../../../public/images/image_loding.png") +
					'"'
			};
		},
		created() {
			this.get_groupList();
		},
		methods: {
			get_groupList() {
				let success = res => {
					let data = res.data;
					console.log(data);
					this.groupListData = data.data;
					this.total_number = parseInt(data.data_sum);

					this.loading = false;
					this.groupListData.length === 0 ?
						(this.placeholder = true) :
						(this.placeholder = false);
				};
				this.$ajax({
					url: "/api/group/group_list",
					method: "get",
					params: {
						user_id: this.$store.getters.userInfo.id,
						page: this.page_index,
						length: this.page_size,
						flag: "home",
						gu_status: 3,
						add_type: 2,
						status: 1
					},
					func: {
						success: success
					}
				});
			},
			agreeInvite(id) {
				this.$confirm("确定要加入此圈组吗？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
						customClass: "confirm-them"
					})
					.then(() => {
						let success = res => {
							this.$message.success(res.msg);
							this.get_groupList();
						};
						this.$ajax({
							url: "/api/group/group_user",
							method: "put",
							data: {
								group_id_w: id,
								user_id_w: this.$store.getters.userInfo.id,
								status: 1
							},
							func: {
								success: success
							}
						});
					})
					.catch(() => {});
			},
			rejectInvite(id) {
				this.$confirm("确定要拒绝此圈组吗？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
						customClass: "confirm-them"
					})
					.then(() => {
						let success = res => {
							this.$message.success(res.msg);
							this.get_groupList();
						};
						this.$ajax({
							url: "/api/group/group_user",
							method: "delete",
							params: {
								group_id: id,
								user_id: this.$store.getters.userInfo.id
							},
							func: {
								success: success
							}
						});
					})
					.catch(() => {});
			},
			currentChange(val) {
				this.page_index = val;
				this.get_groupList();
			}
		}
	};
</script>
